$font-size:14px;
$spacing:6px;
$main-color:#002b36;

*{
    font-size:$font-size;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

html,body{
    color:white;
    list-style:none ;
    background-color: $main-color;
}//背景颜色

#app{
    min-height: 600px;
    &>header{
        height:$font-size*2+$spacing*2 ;
        font-size: $font-size*1.2;
        background-color: darken($main-color,3%);
        line-height: $font-size*2+$spacing*2;
        vertical-align: top;
        &>#app-menu{
            width:40% ;
            min-width: 100px;
            float: left;
            line-height: $font-size*1.2;
            &>li{
                position: relative;
                z-index: 100;
                font-size:$font-size*1.2 ;
                line-height: $font-size*2+$spacing*2;
                list-style: none;
                float: left;
                margin: 0px 5px;
                // &:hover{
                //     background-color:#999; 
                // }
                &:hover{
                    background-color:#999; 
                }
                &.spliter{
                    height: 5px;
                    border-bottom: 1px solid red;
                    
                }
                cursor: hand;
                &>ul{
                    display: none;
                }
            }
            &>li:hover{
                &>ul{
                    position: absolute;
                    display: block;
                    background-color:#27342b;
                    &.spliter{
                        height: 5px;
                        border-bottom: 1px solid red;
                        
                    }
                    &>li{
                        width: 250px;
                        list-style: none;
                        position: relative;
                        &:hover{
                            background-color:#999; 
                        }
                        &>ul{
                            display: none;
                            
                        }
                    }
                    &>li:hover{
                        &>ul{
                            background-color:#27342b;
                           display: block;
                           position: absolute;
                           left:250px;
                           top:0;
                           width: 100px;
                           &>li{
                               list-style: none;
                               &:hover{
                                background-color:#999; 
                            }
                           }
                        }
                    }
                }
            }
        }
        &>h1{
            // padding: $spacing;
            font-weight: 100%;
            width: 30%;
            min-width: 100px;
            overflow: hidden;
            float: left;
            
        }
        &>#app-btns{
            width: 30%;
            min-width: 100px;
            overflow: hidden;
            float: left;
            text-align: right;
            &>span{
                padding: 0px 5px;
                &:hover{
                    background-color:#999; 
                }
            }
            
        }
    }
    &>section{
        min-height: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; //不换行
        justify-content: space-between;
        &>#top-menu{
            flex-grow: 1;
        }
        &>aside{
            flex-grow:0;
        }
        &>#workspace{
            flex-grow: 110;
        }


    }
    &>footer{
         height:$font-size*2+$spacing*1;
       
        background-color: darken($main-color,2.5%);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        &>#btns>li{
            font-size: 20px;
            float: right;
            padding: 0px 10px;
            &:hover{
                background-color:#999; 
            }
        }
        &>#notices>li{
            font-size: 20px;
            float: left;
            padding: 0px 10px;
            &:hover{
                background-color:#999; 
            }

            
        }

    }
}
#main{
    display:flex;
    flex-direction:row;
    width: 100%;
    &>header#top-menu{
        display: flex;
        flex-grow: 0;
        order: 0;
        //display: table-cell;
        width: 50px;
        flex-direction: column;
        justify-content: space-between;
        background-color:  darken($main-color,7%); 
        &>#main-menu {
           // margin-bottom: 650px;//左边功能区的高度
            &>li{
               &>i {
                font-size: 24px;
                margin: 20px 13px;
                color: rgb(107, 100, 100);
               
            }
            &>i:hover {
                color: #333;
            }
            // &.selected>i {
            //     color: lighten(#333, 10%)
            // } 
            }
            
            
        }
        &>#config-menu{
            // list-style: none;

            &>li{
                &>i {
                 font-size: 24px;
                 margin: 20px 13px;
                 color: rgb(107, 100, 100);
                
             }
             &>i:hover {
                 color: #333;
             }
             // &.selected>i {
             //     color: lighten(#333, 10%)
             // } 
             }
        }

       
    }
    &>aside{
        flex-grow: 0;
        order: 1;
        display: table-cell;
        width: 200px;
        
        background-color:  lighten($main-color,1%); 
       // &:hover{
          //  background-color:#999; 
      //  }
    }
    &>#workspace{
        flex-grow: 1;
        order: 2;
        display: table-cell;
        border: 1px solid;
        background-color:  lighten($main-color,3.5%);

    }

}
#main>aside{
    &>h2{
        height: &$font-size+&$spacing*4;
        padding: $spacing*2;
    }
}
#main>aside>section>.aside-section{
    &>header{
        background-color:rgb(122, 118, 118);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        &>h3{
            font-weight: bold;
            padding: $spacing;
            &::before{
                content: "\f054";
                font-family:FontAwesome ;
                padding: 0 $spacing;
            }
        }
        &.selected{
            &>h3::before{
                content: " ";
                width: 80px;
                height: 80px;
                display: inline-block;
                overflow: hidden;
                background: url();

            }
        }
        &>.actions{
            &>.number{
                display: inline-block;
                height: 50px;
                position: relative;
                padding: 0 25px;
                &::before{
                    content: " ";
                    font-size: 0;
                    display: inline-block;
                    height: 24px;
                    box-sizing: border-box;
                    position: absolute;
                    left: 19;
                    border: 6px solid #4d4d4d;
                    border-right: 0;
                    border-top-left-radius: 10px;
                    border-bottom-left-radius: 10px;
                }
                &>span{
                    background-color: #4d4d4d;
                    color: rgb(253, 253, 253);
                    display: inline-block;
                    height: 24px;
                    line-height: 22px;
                }
                &::after{
                    content: " ";
                    font-size: 0;
                    display: inline-block;
                    box-sizing: border-box;
                    height: 24px;
                    position: absolute;
                    border: 6px solid #4d4d4d;
                    border-left: 0;
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                }
            }
        }
    }
}
.tabs {
    display: flex;
    flex-direction: column;
    &>header {
        height: $font-size*3;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        ul.tab-captions {
            font-size: 0;
            &>li {
                font-size: $font-size;
                display: inline-block;
                width: 10*$font-size;
                background-color: black;
                color: white;
                padding: $font-size;
                margin-right: 1px;
                box-shadow: 1px 0 1px 1px rgb(83, 80, 80);
                &>i {
                    float: right;
                    display: none;
                }
                &:hover {
                    &>i {
                        display: inline-block;
                    }
                }
            }
        }
    }
    &>section {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        border: 1px solid blue;
        &>.navigation {
            flex-grow: 0;
            padding: $spacing $font-size;
            height: $font-size+2*$spacing;
            &>li {
                display: inline-block;
                &::after {
                    content: ">";
                }
            }
            &>li:last-child {
                &::after {
                    content: " ";
                }
            }
        }
        &>.workarea {
            overflow: scroll;
            flex-grow: 1;
        }
    }
}

.tree {
    li {
        &::before {
            content: " ";
            width: 20px;
            height: 20px;
            display: inline-block;
        }
    }
    li.collapsed {
        &::before {
            content: ">";
        }
    }
    li.expanded {
        &::before {
            content: "v";
        }
    }
    ul {
        margin-left: 30px;
    }
}
#app-btns{
    &>a{
        width: 20px;
        height: 20px;
    }
    .login{
        &::before{
            content: "\f0c0";
            font-family: FontAwesome;
        }
    }
    .user{
        &::before{
            content: "\f0c1";
            font-family: FontAwesome;
        }
    }
}
